<template>
    <el-container>
        <el-header>

            <h4>当前用户：宿管</h4>

            <el-dropdown>
            <span class="el-dropdown-link">
                {{homemaster.name}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                <el-dropdown-item @click.native="updatapassword">修改密码</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>

        </el-header>
        <el-container>
            <el-aside width="300px">
                <el-row>
                    <el-col :span="12" style="width:300px">
                        <el-menu
                        class="el-menu-vertical-demo"
                        background-color="#213e00"
                        text-color="#fff"
                        active-text-color="#87ceeb"
                        weight="200px"
                        :default-active="$route.path"
                        router>

                        <el-menu-item index="/homeHM">
                            <i class="el-icon-edit-outline"></i>
                            <span slot="title">今日待办</span>
                        </el-menu-item>
                        <el-menu-item index="/studentmannager">
                            <i class="el-icon-collection"></i>
                            <span slot="title">查询并管理学生</span>
                        </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
                </el-breadcrumb>

                <router-view class="routerView"></router-view>

                <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
                    <el-form :model="form" :rules="rules" >
                        <el-form-item label="旧的密码" :label-width="formLabelWidth" prop="oldPassword">
                            <el-input v-model="form.oldPassword" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="新的密码" :label-width="formLabelWidth" prop="newPassword">
                            <el-input type="password" v-model="form.newPassword" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="重新输入" :label-width="formLabelWidth" prop="rePassword">
                            <el-input type="password" v-model="form.rePassword" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </el-dialog>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name:'Homemaster',
    data() {
        return {
            homemaster:JSON.parse(localStorage.getItem("homemaster")),
            dialogFormVisible:false,
            form: {
            oldPassword: '',
            newPassword: '',
            rePassword:''
            },
            rules: {
                oldPassword: [
                    { required:true,message:'旧密码不可为空',trigger:'blur' }
                ],
                newPassword: [
                    { required:true,message:'新密码不可为空',trigger:'blur' }
                ],
                rePassword: [
                    { required:true,message:'请再次输入',trigger:'blur'}
                ]
            },
            formLabelWidth: '120px',
            password:''
        }
    },
    methods:{
        logout(){
            localStorage.clear();
            this.$router.replace({path:'/'});
        },
        updatapassword(){
            let _this = this
            this.dialogFormVisible = true
            axios.get(`http://localhost:8081/homemaster/getHMById/${JSON.parse(localStorage.getItem('homemaster')).hmid}`).then(function(resp){
                _this.password = resp.data.password
            })
        },
        onSubmit(){
            let _this = this
            if(this.form.newPassword != this.form.rePassword){
                alert('两次输入的值不一致')
                return
            }
            if(this.form.oldPassword != this.password){
                alert('密码错误')
                return
            }
            axios.get(`http://localhost:8081/homemaster/changePassById/${_this.form.newPassword}/${JSON.parse(localStorage.getItem('homemaster')).hmid}`).then(function(resp){
                alert('修改成功')
                _this.dialogFormVisible = false
            })
        }
    }
}
</script>

<style scoped>
    .el-main{
        background-color: #ebeaea;
    }
    .el-header{
        display: flex;
        justify-content: space-between;
        background-color: rgb(69, 103, 0);
        line-height: 60px;
    }
    .el-header h4{
        margin: 0;
        color: wheat;
        text-align: left;
        font-size: 25px;
    }
    .el-dropdown{
        color: wheat;
    }
    .el-submenu span{
        width: 200px;
    }
    .el-button{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .el-aside{
        height: 840px;
        background-color: rgb(69, 103, 0);
    }
    
</style>